<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
<div>
    <img data-src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0" alt="" src=""/>
    <img data-src="https://ts1.cn.mm.bing.net/th/id/R-C.e095e6cf39baa7d349d45c4c1c6f5f78?rik=%2fJXDWPsR3VaxVw&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150330493.jpg&ehk=TJoSjF68pWq6vl0NHUl8RTUroI2xHptF83Im%2b0RVWnc%3d&risl=&pid=ImgRaw&r=0" alt="" src=""/>
    <img data-src="https://ts1.cn.mm.bing.net/th/id/R-C.6b9074faed6dae2a0457e690c2aa3a03?rik=6V%2fv2rXhPCf7Pg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20115%2f534%2fw1280h854%2f20190221%2f9461-htknpmf9890147.jpg&ehk=RyGDdQrMiIWbz7Uxa%2fLSPOz2iXvM8JpbkBIZgttQkWc%3d&risl=&pid=ImgRaw&r=0" alt="" src=""/>
    <img data-src="https://bpic.588ku.com/back_list_pic/23/05/17/75e92f4e681efeb526f7d8603199ca11.jpg" alt="" src=""/>
</div>

<script>
    const observer = new IntersectionObserver((entries) => {
        console.log(entries)
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const img = entry.target
                img.src = img.dataset.src
                observer.unobserve(img)
            }
        })
    })

    document.querySelectorAll('img').forEach((img) => {
        observer.observe(img)
    })
</script>
</body>
</html>